<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .birdseye-iframe {
            width: 100%;
            height: 480px;
        }

        .birdseye-iframe > iframe {
            width: 100%;
            height: 98%;
        }

        .birdseye-iframe-resizer {
            height: 10px;
            width: 100%;
            cursor: ns-resize;
            background: lightgrey url("") no-repeat center;
        }

        .new-tab-link {
            text-align: right;
            font-size: 9pt;
            font-family: sans-serif;
        }

        .new-tab-icon {
            background: linear-gradient(transparent, transparent), url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22%3E %3Cpath fill=%22%23fff%22 stroke=%22%2336c%22 d=%22M1.5 4.518h5.982V10.5H1.5z%22/%3E %3Cpath fill=%22%2336c%22 d=%22M5.765 1H11v5.39L9.427 7.937l-1.31-1.31L5.393 9.35l-2.69-2.688 2.81-2.808L4.2 2.544z%22/%3E %3Cpath fill=%22%23fff%22 d=%22M9.995 2.004l.022 4.885L8.2 5.07 5.32 7.95 4.09 6.723l2.882-2.88-1.85-1.852z%22/%3E %3C/svg%3E") no-repeat center right;
        }
    </style>
</head>
<body>

<div id="new-tab-link-{{ container_id }}" class="new-tab-link"></div>
<div class="birdseye-iframe" id="{{ container_id }}">

    <div class="birdseye-iframe-resizer" onmousedown="birdseyeIframeInitDrag(this, event)"></div>
</div>

<script>
    // Based on https://stackoverflow.com/a/8960307/2482744
    function birdseyeIframeInitDrag(resizer, event) {
        var startY = event.clientY;
        var container = resizer.parentNode;
        var startHeight = parseInt(document.defaultView.getComputedStyle(container).height, 10);
        var iframe = container.getElementsByTagName('iframe')[0];
        iframe.style['pointer-events'] = 'none';

        function doDrag(e) {
            container.style.height = (startHeight + Math.max(10, e.clientY) - startY) + 'px';
        }

        function stopDrag() {
            document.documentElement.removeEventListener('mousemove', doDrag, false);
            document.documentElement.removeEventListener('mouseup', stopDrag, false);
            iframe.style['pointer-events'] = 'auto';
        }

        document.documentElement.addEventListener('mousemove', doDrag, false);
        document.documentElement.addEventListener('mouseup', stopDrag, false);
    }

    (function () {
        var url;
        {% if url %}
            url = {{ url | tojson }};
        {% else %}
            var loc = window.location;
            url = loc.protocol + "//" + loc.hostname + ':{{ port }}';
        {% endif %}
        url += '/ipython_call/{{ call_id }}';
        var container = document.getElementById('{{ container_id }}');
        container.innerHTML = '<iframe src="' + url + '"></iframe>' + container.innerHTML;

        container = document.getElementById('new-tab-link-{{ container_id }}');
        container.innerHTML = '<a target="_blank" href="' + url + '">Open in new tab <i class="new-tab-icon">&nbsp;&nbsp;&nbsp;&nbsp;</i></a>';
    })()
</script>

</body>
</html>
